<template>
  <div :style="{ width: props.width, height: props.height }">
    <svg
      xmlns="http://www.w3.org/2000/svg"
      :width="props.width"
      :height="props.height"
      preserveAspectRatio="none meet"
      viewBox="0 0 419.648 275.257"
    >
      <g id="文字边框4" transform="translate(-1322.088 -318.373)">
        <path
          id="路径_961"
          data-name="路径 961"
          d="M384.846-441.17l-7.846.087v7.565l7.846-7.652m4.972-2.055L375-428.774v-14.288Z"
          transform="translate(947.09 787.07)"
          :fill="states.color"
        />
        <path
          id="路径_962"
          data-name="路径 962"
          d="M936.6-272.249l7.846-.087V-279.9l-7.846,7.652m-4.972,2.055,14.818-14.451v14.288Z"
          transform="translate(795.291 863.824)"
          :fill="states.color"
        />
        <path
          id="路径_963"
          data-name="路径 963"
          d="M655.364-450.727H543V-472H676.637Z"
          transform="translate(779.09 791.1)"
          :fill="states.color"
        />
        <path
          id="路径_964"
          data-name="路径 964"
          d="M526.031-450.727H513.667L534.94-472H547.3Z"
          transform="translate(929.273 791.1)"
          :fill="states.color"
          opacity="0.8"
        />
        <path
          id="路径_969"
          data-name="路径 969"
          d="M772.16-199.906l20.487-17.417V-471H540.207L514-445.363H397.94L377-426.285v226.379H772.16m.735,2H375V-427.168l22.165-20.195h116.02L539.391-473H794.647v256.6Z"
          transform="translate(947.088 791.373)"
          :fill="states.color"
        />
        <path
          id="路径_1115"
          data-name="路径 1115"
          d="M-1465,124.455V99h4.364v21.091h22.8v4.364Z"
          transform="translate(2787.088 469.012)"
          :fill="states.color"
          opacity="0.6"
        />
        <path
          id="路径_1114"
          data-name="路径 1114"
          d="M-1437.833,99v25.455h-4.364V103.364H-1465V99Z"
          transform="translate(3179.568 219.373)"
          :fill="states.color"
          opacity="0.6"
        />
      </g>
      <text
        :x="states.x"
        :y="states.y"
        font-family="font"
        :font-size="states.fontSize"
        :fill="states.fontColor"
        style="text-anchor: middle"
      >
        {{ states.text }}
      </text>
    </svg>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted } from "vue";

let props = defineProps({
  width: {
    type: String,
    default: "",
  },
  height: {
    type: String,
    default: "",
  },
  models: {
    type: Object,
    default: () => ({}),
  },
});

const states = computed({
  get: () => props.models,
  set: () => {},
}) as any;

onMounted(() => {
  // states.value.color = "#00FFFF";
  states.value.y = "7%";
});
</script>

<style scoped lang="scss"></style>
